<template>
  <view class="tasks-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-title">我的任务</view>
      <view class="header-subtitle">查看和管理您的风格转换任务</view>
    </view>
    
    <!-- 任务状态筛选 -->
    <scroll-view scroll-x class="status-tabs">
      <view 
        v-for="(tab, index) in statusTabs" 
        :key="index" 
        class="tab-item" 
        :class="{ active: currentStatus === tab.value }"
        @click="setStatus(tab.value)"
      >
        {{ tab.name }}
        <text class="tab-badge" v-if="tab.count > 0">{{ tab.count }}</text>
      </view>
    </scroll-view>
    
    <!-- 任务列表 -->
    <view class="tasks-list" v-if="filteredTasks.length > 0">
      <view 
        class="task-item" 
        v-for="(task, index) in filteredTasks" 
        :key="task.id"
      >
        <!-- 任务信息 -->
        <view class="task-info">
          <view class="task-header">
            <text class="task-id">任务ID: {{ task.id }}</text>
            <text class="task-time">{{ formatTime(task.createTime) }}</text>
          </view>
          
          <view class="task-content">
            <image 
              class="task-image" 
              :src="task.imageUrl" 
              mode="aspectFill"
              @click="previewImage(task.imageUrl)"
            ></image>
            
            <view class="task-details">
              <view class="task-styles">
                <!-- <text class="style-label">风格:</text> -->
                <view class="style-tags">
                  <text class="style-tag" v-for="(style, styleIndex) in task.styles" :key="styleIndex">
                    {{ style.name }}
                  </text>
                </view>
              </view>
              
              <view class="task-status">
                <text class="status-label">状态:</text>
                <text class="status-value" :class="'status-' + task.status">
                  {{ getStatusText(task.status) }}
                </text>
              </view>
              
              <!-- 进度条 (仅对处理中的任务显示) -->
              <view class="task-progress" v-if="task.status === 'waiting' || task.status === 'processing'">
                <progress 
                  :percent="getProgressPercent(task.status)" 
                  stroke-width="4" 
                  activeColor="#FF69B4"
                />
              </view>
            </view>
          </view>
        </view>
        
        <!-- 任务操作 -->
        <view class="task-actions">
          <!-- 完成状态的任务 -->
          <block v-if="task.status === 'completed'">
            <button class="action-btn primary" @click="previewResult(task)">查看结果</button>
            <button class="action-btn" @click="saveAsWork(task)">保存为作品</button>
            <button class="action-btn danger" @click="deleteTask(task)">删除任务</button>
          </block>
          
          <!-- 处理中的任务 -->
          <block v-else-if="task.status === 'waiting' || task.status === 'processing'">
            <button class="action-btn" @click="refreshTask(task)">刷新状态</button>
            <button class="action-btn danger" @click="cancelTask(task)">取消任务</button>
          </block>
          
          <!-- 失败的任务 -->
          <block v-else-if="task.status === 'failed'">
            <button class="action-btn" @click="retryTask(task)">重试任务</button>
            <button class="action-btn danger" @click="deleteTask(task)">删除任务</button>
          </block>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image class="empty-image" src="/static/images/empty-tasks.png" mode="aspectFit"></image>
      <text class="empty-text">{{ getEmptyText() }}</text>
      <button class="create-btn" @click="switchToCreate()">创建新任务</button>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && filteredTasks.length > 0">
      <text class="load-more-text" @click="loadMoreTasks">加载更多</text>
    </view>
    
    <!-- 预览弹窗 -->
    <view class="preview-modal" v-if="showPreview">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">任务结果</text>
          <text class="modal-close" @click="showPreview = false">×</text>
        </view>
        <view class="modal-body">
          <image 
            class="result-image" 
            :src="previewTask.resultUrl" 
            mode="aspectFit"
            @click="previewImage(previewTask.resultUrl)"
          ></image>
        </view>
        <view class="modal-footer">
          <button class="modal-btn" @click="saveToAlbum(previewTask.resultUrl)">保存到相册</button>
          <button class="modal-btn primary" @click="saveAsWork(previewTask)">保存为作品</button>
        </view>
      </view>
    </view>
    
    <!-- 保存作品弹窗 -->
    <view class="save-modal" v-if="showSaveForm">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">保存为作品</text>
          <text class="modal-close" @click="showSaveForm = false">×</text>
        </view>
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">标题</text>
            <input class="form-input" v-model="workForm.title" placeholder="请输入作品标题" />
          </view>
          <view class="form-item">
            <text class="form-label">描述</text>
            <textarea class="form-textarea" v-model="workForm.description" placeholder="请输入作品描述" />
          </view>
          <view class="form-item">
            <text class="form-label">是否公开</text>
            <switch :checked="workForm.isPublic" @change="workForm.isPublic = $event.detail.value" color="#FF69B4" />
          </view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn" @click="showSaveForm = false">取消</button>
          <button class="modal-btn primary" @click="submitSaveWork">保存</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import taskApi from '@/utils/taskApi.js';
import { formatDate } from '@/utils/dateUtils.js';

export default {
  data() {
    return {
      // 任务列表
      tasks: [],
      // 状态筛选标签
      statusTabs: [
        { name: '全部', value: 'all', count: 0 },
        { name: '等待中', value: 'waiting', count: 0 },
        { name: '处理中', value: 'processing', count: 0 },
        { name: '已完成', value: 'completed', count: 0 },
        { name: '已失败', value: 'failed', count: 0 }
      ],
      // 当前选中的状态
      currentStatus: 'all',
      // 分页参数
      page: 1,
      size: 10,
      hasMore: true,
      // 加载状态
      isLoading: false,
      // 预览相关
      showPreview: false,
      previewTask: null,
      // 保存作品相关
      showSaveForm: false,
      saveTaskId: null,
      workForm: {
        title: '',
        description: '',
        isPublic: true
      }
    };
  },
  
  computed: {
    // 根据状态筛选任务
    filteredTasks() {
      if (this.currentStatus === 'all') {
        return this.tasks;
      } else {
        return this.tasks.filter(task => task.status === this.currentStatus);
      }
    }
  },
  
  onLoad() {
    this.loadTasks();
  },

  onShow() {
    // 每次页面显示时刷新任务列表
    console.log('任务页面 onShow 被调用');
    this.loadTasks(true); // 使用true参数强制刷新
  },
  
  onPullDownRefresh() {
    this.refreshTasks();
  },
  
  onReachBottom() {
    this.loadMoreTasks();
  },
  
  methods: {
    // 加载任务列表
    loadTasks(refresh = false) {
      if (refresh) {
        this.page = 1;
        this.hasMore = true;
      }
      
      if (!this.hasMore || this.isLoading) return;
      
      this.isLoading = true;
      
      const params = {
        page: this.page,
        size: this.size
      };
      
      taskApi.getUserTasks(params)
        .then(res => {
          if (res.code === 200) {
            const newTasks = res.data.list || [];
            
            if (refresh) {
              this.tasks = newTasks;
            } else {
              this.tasks = [...this.tasks, ...newTasks];
            }
            
            // 更新是否有更多数据
            this.hasMore = newTasks.length === this.size;
            
            // 更新页码
            if (this.hasMore) {
              this.page++;
            }
            
            // 更新各状态的任务数量
            this.updateStatusCounts();
          } else {
            uni.showToast({
              title: res.message || '加载任务失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          console.error('加载任务失败', err);
          uni.showToast({
            title: '加载任务失败，请重试',
            icon: 'none'
          });
        })
        .finally(() => {
          this.isLoading = false;
          uni.stopPullDownRefresh();
        });
    },
    
    // 刷新任务列表
    refreshTasks() {
      this.loadTasks(true);
    },
    
    // 加载更多任务
    loadMoreTasks() {
      if (this.hasMore && !this.isLoading) {
        this.loadTasks();
      }
    },
    
    // 更新各状态的任务数量
    updateStatusCounts() {
      // 重置计数
      this.statusTabs.forEach(tab => {
        if (tab.value !== 'all') {
          tab.count = this.tasks.filter(task => task.status === tab.value).length;
        } else {
          tab.count = this.tasks.length;
        }
      });
    },
    
    // 设置状态筛选
    setStatus(status) {
      this.currentStatus = status;
      // 切换状态时重新加载任务列表
      this.loadTasks(true);
    },
    
    // 获取状态文本
    getStatusText(status) {
      switch(status) {
        case 'waiting':
          return '等待中';
        case 'processing':
          return '处理中';
        case 'completed':
          return '已完成';
        case 'failed':
          return '已失败';
        default:
          return '未知状态';
      }
    },
    
    // 获取进度百分比
    getProgressPercent(status) {
      switch(status) {
        case 'waiting':
          return 30;
        case 'processing':
          return 70;
        case 'completed':
          return 100;
        default:
          return 0;
      }
    },
    
    // 获取空状态文本
    getEmptyText() {
      if (this.currentStatus === 'all') {
        return '您还没有创建任何风格转换任务';
      } else {
        return `没有${this.getStatusText(this.currentStatus)}的任务`;
      }
    },
    
    // 格式化时间
    formatTime(timestamp) {
      return formatDate(new Date(timestamp));
    },
    
    // 预览结果
    previewResult(task) {
      this.previewTask = task;
      this.showPreview = true;
    },
    
    // 预览图片
    previewImage(imageUrl) {
      uni.previewImage({
        urls: [imageUrl]
      });
    },
    
    // 保存到相册
    saveToAlbum(imageUrl) {
      // 判断平台
      const platform = uni.getSystemInfoSync().platform;
      
      // 小程序平台需要先获取授权
      if (platform === 'mp-weixin' || platform === 'mp-alipay' || platform === 'mp-baidu' || platform === 'mp-toutiao') {
        uni.getSetting({
          success: (res) => {
            // 如果没有相册权限，先获取授权
            if (!res.authSetting['scope.writePhotosAlbum']) {
              uni.authorize({
                scope: 'scope.writePhotosAlbum',
                success: () => {
                  // 获得授权后下载并保存图片
                  this.downloadAndSaveImage(imageUrl);
                },
                fail: () => {
                  // 用户拒绝授权，引导用户去设置页面打开权限
                  uni.showModal({
                    title: '提示',
                    content: '需要您授权保存图片到相册',
                    confirmText: '去设置',
                    success: (modalRes) => {
                      if (modalRes.confirm) {
                        uni.openSetting();
                      }
                    }
                  });
                }
              });
            } else {
              // 已有授权，直接下载并保存
              this.downloadAndSaveImage(imageUrl);
            }
          },
          fail: () => {
            uni.showToast({
              title: '获取授权信息失败',
              icon: 'none'
            });
          }
        });
      } else {
        // 非小程序平台直接下载并保存
        this.downloadAndSaveImage(imageUrl);
      }
    },
    
    // 下载并保存图片
    downloadAndSaveImage(imageUrl) {
      uni.showLoading({
        title: '保存中...'
      });
      
      // 下载图片
      uni.downloadFile({
        url: imageUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            // 保存图片到相册
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '已保存到相册',
                  icon: 'success'
                });
              },
              fail: (err) => {
                console.error('保存图片失败', err);
                uni.showToast({
                  title: '保存失败，请重试',
                  icon: 'none'
                });
              }
            });
          }
        },
        fail: (err) => {
          console.error('下载图片失败', err);
          uni.showToast({
            title: '下载图片失败',
            icon: 'none'
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    
    // 显示保存作品表单
    saveAsWork(task) {
      this.saveTaskId = task.id;
      
      // 显示加载中
      uni.showLoading({
        title: '获取任务信息...'
      });
      
      // 调用接口获取任务详情
      taskApi.getTaskDetail(task.id)
        .then(res => {
          if (res.code === 200) {
            // 预填充表单
            let description = "使用了风格转换效果";
            
            // 如果有resultInfo，则使用它作为描述
            if (res.data && res.data.resultInfo) {
              description = res.data.resultInfo;
            } else if (task && task.resultInfo) {
              description = task.resultInfo;
            }
            
            this.workForm = {
              title: `风格转换作品 ${formatDate(new Date(), 'MM-DD')}`,
              description: description,
              isPublic: true
            };
            
            this.showSaveForm = true;
            this.showPreview = false; // 关闭预览弹窗
          } else {
            uni.showToast({
              title: res.message || '获取任务信息失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          console.error('获取任务信息失败', err);
          uni.showToast({
            title: '获取任务信息失败',
            icon: 'none'
          });
          
          // 如果获取失败，仍然使用现有信息
          let description = "使用了风格转换效果";
          if (task && task.resultInfo) {
            description = task.resultInfo;
          }
          
          this.workForm = {
            title: `风格转换作品 ${formatDate(new Date(), 'MM-DD')}`,
            description: description,
            isPublic: true
          };
          
          this.showSaveForm = true;
          this.showPreview = false; // 关闭预览弹窗
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 提交保存作品
    submitSaveWork() {
      if (!this.workForm.title) {
        uni.showToast({
          title: '请输入作品标题',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '保存中...'
      });
      
      taskApi.saveTaskAsWork(this.saveTaskId, this.workForm)
        .then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            });
            
            // 关闭弹窗
            this.showSaveForm = false;
            
            // 跳转到作品详情
            setTimeout(() => {
              uni.navigateTo({
                url: `/pages/detail/detail?id=${res.data.workId}`
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.message || '保存失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          console.error('保存失败', err);
          uni.showToast({
            title: '保存失败，请重试',
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 刷新任务状态
    refreshTask(task) {
      uni.showLoading({
        title: '刷新中...'
      });
      
      taskApi.getTaskStatus(task.id)
        .then(res => {
          if (res.code === 200) {
            // 更新任务状态
            const index = this.tasks.findIndex(t => t.id === task.id);
            if (index !== -1) {
              this.tasks[index].status = res.data.status;
              
              // 如果任务完成，更新结果URL
              if (res.data.status === 'completed') {
                this.tasks[index].resultUrl = res.data.resultUrl;
              }
              
              // 更新各状态的任务数量
              this.updateStatusCounts();
              
              uni.showToast({
                title: '刷新成功',
                icon: 'success'
              });
            }
          } else {
            uni.showToast({
              title: res.message || '刷新失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          console.error('刷新失败', err);
          uni.showToast({
            title: '刷新失败，请重试',
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 取消任务
    cancelTask(task) {
      uni.showModal({
        title: '取消任务',
        content: '确定要取消该任务吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '取消中...'
            });
            
            taskApi.cancelTask(task.id)
              .then(res => {
                if (res.code === 200) {
                  uni.showToast({
                    title: '取消成功',
                    icon: 'success'
                  });
                  
                  // 更新任务状态
                  const index = this.tasks.findIndex(t => t.id === task.id);
                  if (index !== -1) {
                    this.tasks[index].status = 'failed';
                    this.tasks[index].errorMessage = '用户取消';
                    
                    // 更新各状态的任务数量
                    this.updateStatusCounts();
                  }
                } else {
                  uni.showToast({
                    title: res.message || '取消失败',
                    icon: 'none'
                  });
                }
              })
              .catch(err => {
                console.error('取消失败', err);
                uni.showToast({
                  title: '取消失败，请重试',
                  icon: 'none'
                });
              })
              .finally(() => {
                uni.hideLoading();
              });
          }
        }
      });
    },
    
    // 删除任务
    deleteTask(task) {
      uni.showModal({
        title: '删除任务',
        content: '确定要删除该任务吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '删除中...'
            });
            
            taskApi.deleteTask(task.id)
              .then(res => {
                if (res.code === 200) {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                  });
                  
                  // 从列表中移除任务
                  const index = this.tasks.findIndex(t => t.id === task.id);
                  if (index !== -1) {
                    this.tasks.splice(index, 1);
                    
                    // 更新各状态的任务数量
                    this.updateStatusCounts();
                  }
                } else {
                  uni.showToast({
                    title: res.message || '删除失败',
                    icon: 'none'
                  });
                }
              })
              .catch(err => {
                console.error('删除失败', err);
                uni.showToast({
                  title: '删除失败，请重试',
                  icon: 'none'
                });
              })
              .finally(() => {
                uni.hideLoading();
              });
          }
        }
      });
    },
    
    // 重试任务
    retryTask(task) {
      uni.showModal({
        title: '重试任务',
        content: '确定要重新提交该任务吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '提交中...'
            });
            
            // 提交新任务
            taskApi.submitStyleTask({
              imageUrl: task.imageUrl,
              styleIds: task.styles.map(s => s.id),
              intensity: task.intensity || 100
            })
              .then(res => {
                if (res.code === 200) {
                  uni.showToast({
                    title: '提交成功',
                    icon: 'success'
                  });
                  
                  // 刷新任务列表
                  this.refreshTasks();
                } else {
                  uni.showToast({
                    title: res.message || '提交失败',
                    icon: 'none'
                  });
                }
              })
              .catch(err => {
                console.error('提交失败', err);
                uni.showToast({
                  title: '提交失败，请重试',
                  icon: 'none'
                });
              })
              .finally(() => {
                uni.hideLoading();
              });
          }
        }
      });
    },
    
    // 切换到创建页面（tabbar页面）
    switchToCreate() {
      uni.switchTab({
        url: '/pages/create/create'
      });
    }
  }
}
</script>

<style>
.tasks-container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-subtitle {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.status-tabs {
  display: flex;
  white-space: nowrap;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx 20rpx 20rpx 20rpx; /* 增加顶部内边距，从20rpx改为30rpx */
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  display: inline-block;
  padding: 10rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
  border-radius: 30rpx;
  position: relative;
}

.tab-item.active {
  color: #fff;
  background-color: #FF69B4;
}

.tab-badge {
  position: absolute;
  top: 0rpx; /* 从-12rpx改为-8rpx，让徽章下降一点 */
  right: -12rpx;
  font-size: 20rpx; /* 从24rpx改回20rpx，让字体变小 */
  background-color: #FF69B4;
  color: #fff;
  border-radius: 20rpx;
  padding: 1rpx 8rpx; /* 从2rpx 10rpx改为1rpx 8rpx，让徽章整体变小 */
  min-width: 26rpx; /* 从30rpx改为26rpx，让徽章整体变小 */
  text-align: center;
  z-index: 10; /* 增加z-index确保徽章在最上层 */
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); /* 添加阴影提高可见度 */
}



.tasks-list {
  margin-bottom: 30rpx;
}

.task-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.task-id {
  font-size: 24rpx;
  color: #999;
}

.task-time {
  font-size: 24rpx;
  color: #999;
}

.task-content {
  display: flex;
  margin-bottom: 20rpx;
}

.task-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.task-details {
  flex: 1;
}

.task-styles {
  margin-bottom: 10rpx;
}

.style-label {
  font-size: 26rpx;
  color: #666;
}

.style-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.style-tag {
  font-size: 24rpx;
  color: #FF69B4;
  background-color: rgba(255, 105, 180, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.task-status {
  margin-bottom: 10rpx;
}

.status-label {
  font-size: 26rpx;
  color: #666;
}

.status-value {
  font-size: 26rpx;
  margin-left: 10rpx;
}

.status-waiting {
  color: #FFA500;
}

.status-processing {
  color: #1E90FF;
}

.status-completed {
  color: #32CD32;
}

.status-failed {
  color: #FF4500;
}

.task-progress {
  margin-top: 10rpx;
}

.task-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}

.action-btn {
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  margin-left: 10rpx;
  background-color: #f0f0f0;
  color: #666;
  border: none;
}

.action-btn.primary {
  background-color: #FF69B4;
  color: #fff;
}

.action-btn.danger {
  background-color: #ff6b6b;
  color: #fff;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.create-btn {
  background-color: #FF69B4;
  color: #fff;
  font-size: 28rpx;
  padding: 15rpx 40rpx;
  border-radius: 40rpx;
  border: none;
}

.load-more {
  text-align: center;
  padding: 20rpx 0;
}

.load-more-text {
  font-size: 28rpx;
  color: #999;
}

/* 弹窗样式 */
.preview-modal, .save-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  width: 80%;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
}

.modal-body {
  padding: 20rpx;
}

.result-image {
  width: 100%;
  height: 400rpx;
  border-radius: 10rpx;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.modal-btn {
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  margin-left: 10rpx;
  background-color: #f0f0f0;
  color: #666;
  border: none;
}

.modal-btn.primary {
  background-color: #FF69B4;
  color: #fff;
}

/* 表单样式 */
.form-item {
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.form-textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
}
</style>
